<template>
  <h1>隐藏显示指令</h1>
<!--  前者是直接跳出渲染，dom 树没有此元素
      后者是 css ：display 设为 none
 -->
  <p v-if="false">张三</p>
  <p v-else>李四</p>
  <p v-if="false">李四</p>
  <p v-show="true">小红</p>
  <p v-show="false">小绿</p>
  <p v-if="isShow">太阳</p>
  <p v-else>星星</p>
</template>
<script setup>
  import {ref} from "vue";

  const isShow = ref(false)
</script>


<style scoped>

</style>